<template>
    <view class="index">
        <u-picker :show="showdizhi" ref="uPicker" :columns="cityList" keyName="title" @confirm="confirm" @change="changeHandler">
        </u-picker>
        <view class="vh-cs titleBox" :style="{paddingTop:statusBarHeight+'px',height:statusNavBarHeight+'px'}">
            <view class="dizhi vh-c" @click="showdizhi=true">
                {{cityName}} <u-icon name="arrow-right"></u-icon>
            </view>
            <view class="searchBox" :style="{width:searchWidth+'px'}">
                <u-search v-model="name" placeholderColor="#fff" :showAction="false" @clickIcon="search()" @search="search()" @custom="search()">
                </u-search>
            </view>
        </view>
        <view class="content" :style="{paddingTop:statusNavBarHeight+10+'px'}">
            <view class="lunbo vh-c">
                <u-swiper class="lunbo" :list="photoAllList" @change="change" @click="click"></u-swiper>
            </view>

            <view class="u-demo-block__content" v-if="appList.length">
                <u-notice-bar :text="appList" direction="column" @click="click"></u-notice-bar>
            </view>
            <view class="moduletitle">
                奖励商品库
            </view>
            <view class="spkimgBox" @click="gotogoodsList">
                <image class="spkimg" src="../../static/imgs/spk.png" mode="aspectFit"></image>
                <view class="title vh-c">
                    奖励商品库
                </view>
            </view>
            <view class="vh-cb">
                <view class="moduletitle">
                    推介师傅
                </view>
                <view class="phbbox vh-c" @click="gotopaihang()">
                    <image class="phb" src="../../static/imgs/phb.png" mode="aspectFit"></image>
                    排行榜
                </view>
            </view>
            <view class="shifuItem vh-ss" v-for="(item,index) in shifuList" :key="index" @click="gotodetail(item)">
                <view class="imgbox">
                    <image v-if="item.avatar" :src="item.avatar"></image>
                    <image v-else src="../../static/imgs/ren.png"></image>
                    <image src="../../static/imgs/rzhy.png" mode="aspectFit"></image>
                </view>
                <view>
                    <view class="nameBox vh-cb">
                        <view class="name">
                            {{item.name}}
                        </view>
                        <view class="topbox">
                            接单量{{item.countNumber}}
                        </view>
                    </view>
                    <view class="sl1 vh-cs jianjie">
                        <image src="../../static/imgs/phone.png" mode="aspectFit"></image>
                        <text class="sl1">
                            {{item.phone}}
                        </text>
                    </view>
                    <view class="sl1 vh-cs jianjie">
                        <image src="../../static/imgs/pinggu.png" mode="aspectFit"></image>
                        <text class="sl1">
                            {{item.skill}}
                        </text>
                    </view>
                </view>
            </view>
            <z-navigation></z-navigation>

        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // https://lgqj.oss-cn-beijing.aliyuncs.com/2022/05/25/1653472138945zUt6eF4Dbxqh2e52f267ea50845d0516e0ce8434718b.png
            // https://lgqj.oss-cn-beijing.aliyuncs.com/2022/05/21/1653132589077Wy3tFCcZNF2Uccd97fa879b324fb9d37eeb6289023fd.png
            list1: [
                'https://lgqj.oss-cn-beijing.aliyuncs.com/2022/05/25/1653472138945zUt6eF4Dbxqh2e52f267ea50845d0516e0ce8434718b.png',
                'https://lgqj.oss-cn-beijing.aliyuncs.com/2022/05/21/1653132655530kxj2NETMhgRw69feae4d70bec98ceee18f9e2316e9b0.png',
                'https://lgqj.oss-cn-beijing.aliyuncs.com/2022/05/31/1654010537459rKWxWmuDeVdt9c81e3a83621d8d9198295bd8d357c28.png',
            ],
            shifuList: [],

            text4: [
                '寒雨连江夜入吴',
                '平明送客楚山孤',
                '洛阳亲友如相问',
                '一片冰心在玉壶'
            ],
            number: 1,
            size: 10,
            showdizhi: false,
            columns: [
                // ['内蒙古'],
                ['深圳', '厦门', '上海', '拉萨']
            ],
            columnData: [
                ['深圳', '厦门', '上海', '拉萨'],
                ['得州', '华盛顿', '纽约', '阿拉斯加']
            ],
            name: '',
            cityList: [],
            cityName: '',
            cityId: '',
            appList: [],
            customBarH: this.customBar,
            statusNavBarHeight: '',
            navBarHeight: '',
            statusBarHeight: '',
            searchWidth: '',
            photoAllList:[]
        };
    },
    //第一次加载
    onLoad(e) {
            // uni.navigateTo({
            //     url: '/pages/startPage/startPage'
            // });
        console.log('asd')
        uni.showLoading({
            title: '加载中',
            mask: true
        });
        // 隐藏原生的tabbar
        // uni.hideTabBar();
    },
    //页面显示
    onShow() {
        // 隐藏原生的tabbar
        uni.hideTabBar();
        this.number = 1
        this.getCity()
        this.photoAll()
        this.getnotification()
        // 获取状态栏高度
        var { statusBarHeight, windowWidth } = uni.getSystemInfoSync();
        // 获取胶囊位置尺寸
        var menuButtonObject = uni.getMenuButtonBoundingClientRect();
        var { top, height, left, width } = menuButtonObject;
        // 获取导航栏的高度
        console.log(menuButtonObject);
        var navBarHeight = height + (top - statusBarHeight) * 2;
        // 计算状态栏与导航栏的总高度
        var statusNavBarHeight = statusBarHeight + navBarHeight;
        this.navBarHeight = navBarHeight
        this.statusNavBarHeight = statusNavBarHeight
        this.statusBarHeight = statusBarHeight
        this.menuButtonObject = menuButtonObject
        this.searchWidth = menuButtonObject.left - windowWidth / 5 - 50
        //搜索宽度


    },
    onShareAppMessage(res) {
        return {
            title: '桦舟良工巧匠',
            path: `/pages/index/index`
        }
    },
    onReady() {
        uni.hideLoading();
    },
    //方法
    methods: {
        search() {
            this.number = 1
            this.getShiFu()
        },
        changeHandler(e) {
            const {
                columnIndex,
                value,
                values, // values为当前变化列的数组内容
                index,
                // 微信小程序无法将picker实例传出来，只能通过ref操作
                picker = this.$refs.uPicker
            } = e
            // 当第一列值发生变化时，变化第二列(后一列)对应的选项
            // if (columnIndex === 0) {
            //     // picker为选择器this实例，变化第二列对应的选项
            //     picker.setColumnValues(1, this.columnData[index])
            // }
        },
        // 回调参数为包含columnIndex、value、values
        confirm(e) {
            this.showdizhi = false
            this.cityName = e.value[0].title
            this.cityId = e.value[0].id
            this.number = 1
            this.getShiFu()

        },

        getnotification() {
            this.$http.get('/promotion/notification/app_list').then(val => {
                this.appList=[]
                if (val.data) {
                    // this.appList = val.data
                    for (var i in val.data) {
                        this.appList.push(val.data[i].content)
                        console.log(this.appList)
                    }
                }
            })
        },
        photoAll() {
            this.$http.get('/dp/photo/getAll').then(val => {
                console.log(val)
                val.data.map((item)=>{
                    this.photoAllList.push(item.photo)
                })
            })
        },
        getCity() {
            this.$http.get('/promotion/workerInfo/city_list').then(val => {
                this.cityList[0] = val.data
                console.log(this.cityList)
                this.cityName = val.data[0].title
                this.cityId = val.data[0].id
                this.getShiFu()
            })
        },
        getShiFu() {
            let param = {
                size: this.size,
                number: this.number,
                name: this.name,
                cityId: this.cityId
            }
            this.$http.get('/app/recommender', param).then(val => {
                console.log(val)
                if (this.number == 1) {
                    this.shifuList = []
                }
                this.shifuList = this.shifuList.concat(val.data.list)
                this.shifuListtotal = val.data.total
            })
        },
        onPageJump(url) {
            uni.navigateTo({
                url: url
            });
        },
        onTokenJump(url) {
            this.judgeLogin(() => {
                uni.navigateTo({
                    url: url
                });
            });
        },
        onPrivacyAgreement() {
            // #ifdef H5
            window.open("https://ask.dcloud.net.cn/article/36937");
            // #endif
            // #ifndef H5
            this.$store.commit("setWebViewUrl", "https://ask.dcloud.net.cn/article/36937");
            uni.navigateTo({
                url: '/pages/template/webView'
            });
            // #endif
        },
        gotogoodsList() {
            uni.navigateTo({
                url: '/pages/goodsList/goodsList'
            })
        },

        //gotodetail工人详情
        gotodetail(item) {
            console.log(item)
            uni.navigateTo({
                url: '/pages/workerDetails/workerDetails?id=' + item.id,
            });
        },
        gotopaihang(item) {
            uni.navigateTo({
                url: '/pages/leaderboard/leaderboard',
            });
        },
    },
    //页面隐藏
    onHide() { },
    //页面卸载
    onUnload() { },
    //页面下来刷新
    onPullDownRefresh() { 
        return
    },
    //页面上拉触底
    onReachBottom() {
        if (this.shifuListtotal != this.shifuList.length) {
            this.number++
            this.getShiFu()
        }
        console.log('出底部')
    },
    //用户点击分享
    // onShareAppMessage(e) {
    //     return this.wxShare();
    // }
};
</script>
<style lang="scss">

.u-notice__swiper{
    // height: inherit !important;
    height: 30px !important;
}

.index {
    min-height: 100vh;
    .u-notice {
        // margin-top: 20rpx;
        text {
            font-size: 38rpx !important;
            color: #ff6d4d !important;
        }
    }
    .u-notice-bar.data-v-24c07869 {
    overflow: hidden;
    padding: 15px 12px;
    flex: 1;
}
.u-notice__swiper{
    // height: inherit !important;
    height: 40px !important;
}

    .u-demo-block__content {
        @include flex(column);
    }
    .titleBox {
        width: 100%;
        // height: 140rpx;
        color: #fff;
        background-color: #004ee8;
        position: fixed;
        padding: var(--status-bar-height) 30rpx 0rpx 30rpx;
        z-index: 10;
        .dizhi {
            width: 25vw;
            font-size: 26rpx !important;
            font-weight: 600;
            color: #ffffff;
            line-height: 37rpx;
            text {
                color: #ffffff !important;
                font-size: 26rpx !important;
            }
        }
        .searchBox {
            width: 44vw;
            .u-search__content {
                background-color: rgba($color: #fff, $alpha: 0.2) !important;
                height: 56rpx;
            }
            .u-search__content__input {
                background-color: transparent !important;
            }
            text {
                color: #ffffff !important;
                font-size: 38rpx !important;
            }
            .u-search__content__input {
                color: #fff !important;
            }
        }
    }

    .u-picker__view__column,
    .u-picker__view {
        height: 40vh !important;
    }
    .content {
        background: url("../../static/imgs/indexbg.png") #fff no-repeat;
        background-size: 100%;
        min-height: 100vh;
        padding: 132rpx 32rpx 70rpx 32rpx;
        .lunbo {
            margin-bottom: 20rpx;
            border-radius: 20rpx !important;
            overflow: auto;
            .u-swiper {
                border-radius: 20rpx !important;
                width: 100% !important;
                height: calc((100vw - 62rpx) * 0.5) !important;
                background-color: transparent !important;
            }
            .u-swiper__wrapper__item__wrapper__image,
            swiper {
                height: 100% !important;
                border-radius: 20rpx !important;
            }
            image {
            }
        }
        .gongxibox {
            background: #fff6f6;
            border-radius: 10rpx;
            padding: 20rpx;
            color: #ff6d4d;
            font-size: 26rpx;
            image {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
        }
        .moduletitle {
            font-size: 36rpx;
            font-weight: 600;
            color: #333333;
            line-height: 50rpx;
            margin: 20rpx 0;
        }
        .spkimgBox {
            position: relative;
            .spkimg {
                width: 100%;
                height: 23vw;
                // height: auto;
            }
            .title {
                position: absolute;
                width: 100%;
                height: 23vw;
                color: #fff;
                font-size: 40rpx;
                top: 0;
            }
        }
        .phbbox {
            image {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
            font-size: 32rpx;
            font-weight: 600;
            color: #ff8e2b;
            line-height: 45rpx;
        }
        .shifuItem {
            border-radius: 30rpx;
            border: 2rpx solid #e9f1fc;
            padding: 25rpx;
            margin-top: 20rpx;
            .imgbox {
                width: 150rpx;
                margin-right: 15rpx;
                image:nth-child(1) {
                    width: 100%;
                    width: 100rpx;
                    height: 100rpx;
                    margin-bottom: 10rpx;
                    border-radius: 50%;
                    margin: 0 auto;
                }
                image:nth-child(2) {
                    width: 100%;
                    width: 130rpx;
                    height: 60rpx;
                    margin: 0 auto;
                }
            }
            .nameBox {
                width: calc(100vw - 250rpx);
                .name {
                    font-size: 34rpx;
                    font-weight: 600;
                    color: #333333;
                    line-height: 2;
                }
                .topbox {
                    padding: 5rpx 15rpx;
                    background: #f1f6ff;
                    border-radius: 8rpx;
                    border: 1rpx solid $themeColor;
                    font-size: 26rpx;
                    font-weight: 400;
                    color: $themeColor;
                    line-height: 37rpx;
                }
            }
            .jianjie {
                font-size: 26rpx;
                font-weight: 600;
                color: #333333;
                line-height: 2;
                width: calc(100vw - 250rpx);
                image {
                    width: 35rpx;
                    height: 35rpx;
                    margin-right: 10rpx;
                }
                text {
                    width: calc(100vw - 300rpx);
                }
            }
        }
    }
}
</style>
